<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      div {
        width: 200px;
        height: 200px;
        border: 1px red solid;
      }
      input {
        /* border: 5px yellowgreen solid; */
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div>盒子</div>
    <input type="text" />
    <script>
      // 1. 找到元素 绑定事件，添加逻辑
      const div = document.querySelector('div')
      // 如果写了箭头函数 this 就是 window
      // 用的时候普通的匿名函数，this 就是当前这个 dom 元素
      div.addEventListener('click', function () {
        // console.log(this)
        // css 中的- js 中改为 驼峰命名
        // 修改样式 先点 style，再点样式
        this.style.backgroundColor = '#0094ff'
        // 其他属性直接写即可
        this.innerHTML = '翻滚吧蛋炒饭'
      })
      div.addEventListener('mouseenter', function () {
        console.log('enter')
        this.style.backgroundColor = 'red'
      })
      div.addEventListener('mouseleave', function () {
        console.log('leave')
        this.style.backgroundColor = 'white'
      })

      // 获取输入框
      const ipt = document.querySelector('input')

      // 绑定事件
      // 需求 1：失去焦点之后，如果输入框没有内容，加上红色边框
      // 需求 2：按了回车之后，获取用户输入的内容，弹框提示
      ipt.addEventListener('focus', function () {
        console.log('focus-获取焦点')
      })
      ipt.addEventListener('blur', function () {
        console.log('blur-失去焦点')
        console.log(this.value)
        if (this.value === '') {
          // 加粗边框
          this.style.border = '10px red solid'
        }
      })
      ipt.addEventListener('keydown', function () {
        console.log('keydown-按下')
      })
      // 有事件参数，要用可以获取
      ipt.addEventListener('keyup', function (e) {
        console.log('keyup-松开')
        console.log(e.keyCode)
        // 按了回车
        if (e.keyCode === 13) {
          // 获取输入的内容
          alert(this.value)
          // 弹框
        }
      })

      // 用户输入内容的时候，判断输入的内容，是否是邮箱
      // 不是，输入框变红
      // 是，变绿
      ipt.addEventListener('input', function () {
        console.log('input-输入')
      })
    </script>
  </body>
</html>
